import { api } from '@/servers/api'
import { getData } from '@/servers/http'
import React, { useEffect, useState } from 'react'
import { history } from 'umi'
import styles from './indes.module.less'
import { Button, SafeArea } from 'antd-mobile'

const Detail = () => {
    const { id, domain } = history.location.query || {}
    const [detail, setDetail] = useState<any>()

    /** 获取机构详情 */
    const getDetail = () => {
        getData(`${api.companyInfo}/${id}`, { mlh_side_domain: domain }).then(({ status, data }) => {
            if (status === 200) {
                setDetail(data)
            }
        })
    }
    useEffect(() => {
        document.title = '机构详情'
        getDetail()
    }, [])
    /** 前往报名 */
    const goEnroll = () => {
        history.push(`/organization/fill?id=${id}&domain=${domain}`)
    }

    return (
        <div className={styles.organization_detail}>
            <img className={styles.bg_head} src="http://chuangpei-prod.oss.busionline.com/wechat/asserts/image/bg_org_detail@2x.png" />
            <div className={styles.head_box}>
                <div className={styles.logo_box}>
                    <img src={detail?.logo_url} />
                    <span>{detail?.name}</span>
                </div>
                <p className={styles.text}>负责人：{detail?.realname}</p>
                <p className={styles.text}>地址：{detail?.address}</p>
            </div>
            <div className={styles.content_box}>
                {!!detail?.course_names?.length && (
                    <div className={styles.item}>
                        <p className={styles.title}>培训课程</p>
                        <div className={styles.tag_box}>
                            {detail?.course_names?.map((item: any) => (
                                <span key={item}>{item}</span>
                            ))}
                        </div>
                    </div>
                )}
                {detail?.introduce && (
                    <div className={styles.item}>
                        <p className={styles.title}>机构简介</p>
                        <p className={styles.introduce}>{detail?.introduce}</p>
                    </div>
                )}
                {(detail?.company_photo || detail?.company_video) && (
                    <div className={styles.item}>
                        <p className={styles.title}>机构风采</p>
                        <div className={styles.media_box}>
                            {detail?.company_photo?.map((item: any) => (
                                <img key={item.address} src={item.address} />
                            ))}
                            {detail?.company_video?.map((item: any) => (
                                <video key={item.address} src={item.address} controls />
                            ))}
                        </div>
                    </div>
                )}
            </div>
            <SafeArea position="bottom" />
            <div className={styles.footer_box}>
                <Button className={styles.btn} onClick={goEnroll}>
                    立即报名
                </Button>
                <SafeArea position="bottom" />
            </div>
        </div>
    )
}

export default Detail
